import React from 'react';
import { Grid } from '@material-ui/core'
import VideoItem from './VideoItem'
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    ps: {
        display: 'flex',
        alignItems: 'center',
        position: 'fixed',
        left: 0,
        top: 150,
        zIndex: 180,
        width: '100%',

    }
}));

// 推荐视频列表
const VideoList = ({ videos,onVideoSelect }) => {
    const classes = useStyles();
    const listOfVideos = videos.map((video,index) => {
        // 没有找到唯一熟悉，暂时用到index
        return <VideoItem key={index} video={video}  onVideoSelect={onVideoSelect}/>
    });
    return (
        <Grid container className={classes.ps} spacing={3}>
            {listOfVideos}
        </Grid>
    )
}

export default VideoList;